<template>
  <a-drawer
    :visible="visible"
    :title="title"
    placement="right"
    @close="cancelClick"
    width="600"
    :body-style="{
      height: 'calc(100% - 100px)',
      boxSizing: 'border-box',
      overflowY: 'auto',
    }"
    destroyOnClose
  >
    <a-form layout="vertical">
      <a-form-item label="开户银行" v-bind="validateInfos.bank_name">
        <a-input
          v-model:value="modelRef.bank_name"
          placeholder="请输入开户银行"
        />
      </a-form-item>
      <a-form-item label="开户账号" v-bind="validateInfos.bank_account">
        <a-input
          v-model:value="modelRef.bank_account"
          placeholder="请输入开户账号"
        />
      </a-form-item>
    </a-form>
    <div class="drawer-footer">
      <a-button class="mr-10" @click="cancelClick">取消</a-button>
      <a-button type="primary" @click="submitClick" :loading="loading"
        >保存</a-button
      >
    </div>
  </a-drawer>
</template>

<script>
import {
  defineComponent,
  ref,
  createVNode,
  onActivated,
  watch,
  computed,
  reactive,
  toRefs,
} from "vue";
import request from "@/common/utils/request";
import { useRoute, useRouter } from "vue-router";
import { Form, message } from "ant-design-vue";
const useForm = Form.useForm;

export default defineComponent({
  name: "AddBankAccount",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
    invoiceId: {
      type: [String, Number],
      default: 0,
    },
    detail: {
      type: Object,
      default: () => {
        return {};
      },
    },
    ownerId: {
      type: [String, Number],
      default: 0,
    },
  },
  setup(props, context) {
    const router = useRouter();
    const route = useRoute();

    const state = reactive({
      count: 0,
      loading: false,
    });

    const modelRef = reactive({
      bank_account: "",
      bank_name: "",
    });
    const rulesRef = reactive({
      bank_account: [
        {
          required: true,
          message: "请输入开户账号",
        },
      ],
      bank_name: [
        {
          required: true,
          message: "请输入开户银行",
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const cancelClick = () => {
      resetFields();
      context.emit("closeChange");
    };

    const submitClick = () => {
      validate().then(() => {
        let params = { ...modelRef };
        params.invoice_title_id = props.invoiceId;
        params.owner_id = Number(route.query.id) || props.ownerId;
        state.loading = true;
        if (props.id) {
          params.id = props.id;
          request
            .put("/org", "/org/owner/bank/list", params)
            .then(() => {
              message.success("修改成功");
              context.emit("successChange");
              resetFields();
              state.loading = false;
            })
            .catch(() => {
              state.loading = false;
            });
          return;
        }
        request
          .post("/org", "/org/owner/bank/list", params)
          .then(() => {
            message.success("保存成功");
            context.emit("successChange");
            resetFields();
            state.loading = false;
          })
          .catch(() => {
            state.loading = false;
          });
      });
    };

    const getBankDetail = () => {
      request.get("/org", `/org/owner/bank/list/${props.id}`).then((res) => {
        setModelRef(res.detail);
      });
    };
    const setModelRef = (state) => {
      for (let key in state) {
        if (key in modelRef) {
          modelRef[key] = state[key];
        }
      }
    };

    const title = computed(() => {
      return props.id ? "编辑银行账号" : "新增银行账号";
    });

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          if (props.id) {
            getBankDetail();
          }
        }
      }
    );

    return {
      ...toRefs(state),
      cancelClick,
      modelRef,
      validateInfos,
      submitClick,
      title,
    };
  },
});
</script>

<style lang="less" scoped></style>
